<template>
	<view>
		<u-popup :show="modalvisible" mode="bottom">
			<view class="container">
				<u--form labelPosition="top" :model="basicForm" ref="form" labelWidth="auto" 
					:labelStyle="{
						fontSize: '14px',
						color: '#B2B2B2',
						lineHight: '20px'
					}"
				>
					<u-form-item label="经营团队" prop="teamName">
						<h-select-team-input-popup
						  style="width: 100%"
						  v-model="basicForm.teamName"
						  placeholder="请选择经营团队"
						  :tdlx="1"
							suffixIcon="arrow-down-fill"
							:suffixIconStyle="{ color: '#B2B2B2' }"
						  border="surround"
						></h-select-team-input-popup>
					</u-form-item>
					<u-form-item label="签订单位" prop="signUnit">
						<h-select-company-input-popup
						  style="width: 100%"
						  v-model="basicForm.signUnit"
						  placeholder="请选择签订单位"
						  border="surround"
							auditStatus="2"
							suffixIcon="arrow-down-fill"
							:suffixIconStyle="{ color: '#B2B2B2' }"
						></h-select-company-input-popup>
					</u-form-item>
					<u-form-item label="业绩归属年度" prop="year">
						<h-dict-select
							style="width: 100%" 
							v-model="basicForm.year"
							placeholder="请选择业绩归属年度" 
							dictName="yjgsnd" 
							suffixIcon="arrow-down-fill" 
							:suffixIconStyle="{color: '#B2B2B2'}"
						></h-dict-select>
					</u-form-item>
					<u-form-item label="项目来源" prop="projectSource">
						<h-dict-select
							style="width: 100%" 
							v-model="basicForm.projectSource"
							placeholder="请选择项目来源" 
							dictName="omc_project_type"
							suffixIcon="arrow-down-fill" 
							:suffixIconStyle="{color: '#B2B2B2'}"
						></h-dict-select>
					</u-form-item>
					<u-form-item label="业务分类" prop="year" @click="onChoice">
						<u--input
							disabled
							v-model="basicForm.businessCategoryName"
							placeholder="请选择业务分类"
							border="surround"
							suffixIcon="arrow-down-fill"
							:suffixIconStyle="{color: '#B2B2B2'}"
							:disabledColor="'#ffffff'"
						></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="reject_buttons">
				<view class="btn1" @click="onCancel">重 置</view>
				<view class="btn2" @click="onConfirm">确 定</view>
			</view>
		</u-popup>
		
		<qian-tree
			ref="qiantree" 
			lazy
			:multiple="false" 
			:range="getFilesBusinessCategoryList"
			:foldAll="true"
			selectParent
			idKey="categoryCode"
			rangeKey="categoryName"
			@confirm="treeConfirm"
			@cancel="treeCancel"
		></qian-tree>
	</view>
</template>
<script>
import qianTree from '@/components/qian-tree/qian-tree.vue';
import {
	filesBusinessCategoryList, // 业务分类列表
} from '@/api/index.js'
export default {
	props: {
		// 业务分类列表
		getFilesBusinessCategoryList: {
			type: [Array],
			default: () => []
		}
	},
	components: { qianTree},
	data() {
		return {
			modalvisible: false,
			basicForm: {
				projectName: '',
				teamName: '', // 经营团队
				signUnit: '', // 签订单位
				year: '', // 业绩归属年度
				projectSource: '', // 项目来源
				businessCategoryName: '', // 业务分类
				businessCategory: '' // 业务分类
			}
		}
	},
	methods: {
		// 点击选择弹窗业务分类
		onChoice () {
			this.modalvisible = false
			this.$refs.qiantree._show();
		},
		treeConfirm (item, index) {
			this.$set(this.basicForm, 'businessCategory', item[0].id)
			var serviceName = ''
			if (item[0] && item[0].parents && item[0].parents.length) {
				serviceName = item[0].parents[0].name + '/' + item[0].name
			} else {
				serviceName = item[0].name
			}
			
			this.$set(this.basicForm, 'businessCategoryName', serviceName)
			this.modalvisible = true
		},
		treeCancel () {
			this.modalvisible = true
		},
		onCancel() {
			this.basicForm = {
				projectName: '',
				teamName: '', // 经营团队
				signUnit: '', // 签订单位
				year: '', // 业绩归属年度
				projectSource: '', // 项目来源
				businessCategoryName: '', // 业务分类
				businessCategory: '' // 业务分类
			}
			this.closePopup(1)
		},
		async onConfirm() {
			this.closePopup()
		},
		// 更新数据
		closePopup (value) {
			this.modalvisible = false
			if (value == 1) {
				this.$emit('updateData', {})
			} else {
				var queryParam = {}
				for (var i in this.basicForm) {
					if (this.basicForm[i]) {
						queryParam[i] = this.basicForm[i]
					}
					
				}
				this.$emit('updateData', queryParam)
			}
		}
	}
}
</script>

<style scoped lang="scss">

.container {
	padding: 20px;
}

.reject_buttons {
	// position: fixed;
	// bottom: 0;
	// left: 0;
	// right: 0;
	padding: 24rpx 36rpx;
	display: flex;
	border-top: 2rpx solid #F2F2F2;
	z-index: 0;
	font-size: 17px;
	font-weight: 400;

	view {
		// width: 328rpx;
		width: 100%;
		height: 80rpx;
		border-radius: 5px;
		line-height: 80rpx;
		text-align: center;
	}

	.btn1 {
		// width: 168rpx;
		background: rgba(0, 0, 0, 0.05);
		color: rgba(0, 0, 0, 0.5);
		margin-right: 24rpx;
	}

	.btn2 {
		background: #1E6FFF;
		color: #FFFFFF;
	}
}
</style>